<template>

  <header class="antialiased bg-white Male text-slate-500 ">
    <div
      class="sticky top-0 z-40 w-full backdrop-blur flex-none transition-colors duration-500 lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-white/95 supports-backdrop-blur:bg-white/60 dark:bg-transparent">
      <div class="mx-auto max-w-8xl header">
        <div class="headimg">
          <div class="background">
            <div class="logo ml-2" ><SvgIcon name="svg-ts"></SvgIcon></div>
            <!-- <div class="icon"></div> -->
            <div class="title-box">维标文档自动生成系统</div>
          </div>
          <!-- </div> -->
          <!-- <border name="svg-head" color="#f1f2f6"></border> -->
          <!-- <div class="title-box">
            <div class="title">维表文档自动生成系统</div>
          </div> -->
          <!-- <img :src="homeBack" alt=""> -->
        </div>
        <!-- <div class="px-4 py-4 border-b border-slate-900/10 lg:px-8 lg:border-0 dark:border-slate-300/10">
          <div class="relative flex items-center text-2xl sm:text-2xl font-blimone">
            <div class="relative items-center hidden ml-auto lg:flex">
              <nav class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-200">
                <ul class="flex space-x-8 tag">
                  <li>
                    <router-link to="/contain" class="hover:text-sky-500 dark:hover:text-sky-400">echartsNav</router-link>
                  </li>
                  <li>
                    <router-link to="/component" class="hover:text-sky-500 dark:hover:text-sky-400">ComponentDemo</router-link>
                  </li>
                  <li>
                    <router-link to="/demo" class="hover:text-sky-500 dark:hover:text-sky-400">GithubDemo</router-link>
                  </li>
                  <li>
                    <router-link to="/login" class="hover:text-sky-500 dark:hover:text-sky-400">登录</router-link>
                  </li>
                </ul>
              </nav>
              <div class="flex items-center pl-6 ml-6 border-l border-slate-200 dark:border-slate-800">
                <el-tooltip :content="theme === 'light' ? '设置暗黑主题' : '设置明亮主题'">
                  <el-button class="nav-btn" :shape="'circle'" type="info" plain :icon="theme === 'dark' ? Sunny : Moon"
                    circle size="small" @click="toggleTheme()" />
                </el-tooltip>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
// import homeBack from '@/assets/images/back.png'

import border from '@/components/SvgIcon/border.vue'
// import SvgIcon from '../SvgIcon/index.vue';
// import { ref } from 'vue'
import { useDark, useToggle } from '@vueuse/core';
import { useAppStore } from '@/store';
import { Sunny, Moon } from '@element-plus/icons-vue';

// const title = ref('I want to study typescript')
// 检测浏览器系统主题
// const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
const appStore = useAppStore();
// const useStore = useUserStore()
const theme = computed(() => {
  return appStore.theme;
});
const isDark = useDark({
  selector: 'body',
  onChanged(dark: boolean) {
    appStore.toggleTheme(dark);
  },
});
const toggleTheme = useToggle(isDark);
</script>

<style lang="less" scoped>
.header {
  border-bottom: 1px solid #e2e2e2;
}

.tag {
  margin-bottom: 0;
}

html.dark {
  a {
    color: white !important;
  }
}

html {
  a {
    color: black !important;
  }
}

.headimg {
  width: 100%;
  height: 60px;

  .background {
    position: absolute;
    height: 60px;
    width: 100%;
    // background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    display: flex;
    align-items: center;
    .logo{
      width: 40px;
      height: 40px;
    }
    .title-box {
      // width: 40%;
      font-weight: 600;
      line-height: 2rem;
      font-size: 2rem;
      color: rgb(33, 32, 32);
      // padding-top: 15px;
    }
  }

  // .title-box {
  //   margin: auto;
  //   width: 40%;
  //   text-align: center;
  //   font-weight: 600;
  //   line-height: 2rem;
  //   font-size: 2rem;
  //   color: #a1dfff;
  //   padding-top: 15px;
  // }
}
</style>
